<template>
  <div class="nb">
    <navBar>
      <template v-slot:left>
        <div class="back" @click="handleblack"></div>
      </template>
      <template v-slot:center>
        <div class="title">
          <div class="titleItem" v-for="(item,index) in titles" :key="index"
               :class="{active:index == currentIndex}"
               @click="handleClick(index)"
          >
            {{item}}
          </div>
        </div>
      </template>
    </navBar>
  </div>
</template>

<script>
  import navBar from 'components/common/navigation-bar.vue'
  export default {
    data(){
      return {
        titles:['商品','参数','评论','推荐'],
        currentIndex:0
      }
    },
    components:{
      navBar
    },
    methods:{
      handleClick(index){
        this.currentIndex = index
        this.$emit('titleClick',{index})
      },
      handleblack(){
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .title{
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .titleItem{
    flex:1;
    font-size:13px;
    color:#222222;
  }
  .active{
    color:#FF5777
  }
  .back{
    display:block;
    width:15px;
    height:15px;
    border:1px solid #222;
    transform:rotate(45deg);
    border-top:transparent;
    border-right:transparent;
    position:relative;
    top:15px;
    left:20px;
  }
</style>
